<template>
  <el-dialog
    v-model="visible"
    title="考试须知"
    width="50%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <div class="rules-content">
      <div v-if="loading" class="loading">
        <el-skeleton :rows="6" animated />
      </div>
      <template v-else>
        <div class="rules-section" v-for="rule in rules" :key="rule.id">
          <h3>{{ rule.title }}</h3>
          <p>{{ rule.content }}</p>
        </div>
        
        <div class="settings-section">
          <h3>考试设置</h3>
          <ul>
            <li>
              <el-icon><Warning /></el-icon>
              切屏限制：{{ settings.allow_switch_screen ? `允许切屏${settings.max_switch_count}次` : '禁止切屏' }}
            </li>
            <li>
              <el-icon><Warning /></el-icon>
              复制粘贴：{{ settings.allow_copy_paste ? '允许' : '禁止' }}
            </li>
            <li>
              <el-icon><Warning /></el-icon>
              全屏要求：{{ settings.require_fullscreen ? '必须全屏' : '不要求全屏' }}
            </li>
          </ul>
        </div>
      </template>
    </div>
    
    <div class="agreement-section">
      <el-checkbox v-model="agreed">我已阅读并同意遵守以上考试规则</el-checkbox>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button 
          type="primary" 
          @click="handleConfirm"
          :disabled="!agreed"
        >
          开始考试
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Warning } from '@element-plus/icons-vue'

const props = defineProps({
  examId: {
    type: [String, Number],
    required: true
  }
})

const emit = defineEmits(['confirm'])

const visible = ref(true)
const loading = ref(true)
const agreed = ref(false)
const rules = ref([])
const settings = ref({})

onMounted(async () => {
  try {
    // TODO: 调用获取考试规则API,可选
    // const res = await getExamRules(props.examId)
    // 模拟数据
    await new Promise(resolve => setTimeout(resolve, 1000))
    rules.value = [
      {
        id: 1,
        title: '诚信考试',
        content: '考生应当遵守考试纪律，独立完成考试，不得作弊。'
      },
      {
        id: 2,
        title: '设备要求',
        content: '确保设备电量充足，网络稳定，摄像头和麦克风正常工作。'
      },
      {
        id: 3,
        title: '考试环境',
        content: '选择安静、明亮的环境进行考试，避免他人打扰。'
      }
    ]
    settings.value = {
      allow_switch_screen: false,
      max_switch_count: 3,
      allow_copy_paste: false,
      require_fullscreen: true
    }
    loading.value = false
  } catch (error) {
    ElMessage.error('获取考试规则失败')
  }
})

const handleConfirm = () => {
  if (!agreed.value) {
    ElMessage.warning('请先阅读并同意考试规则')
    return
  }
  
  visible.value = false
  emit('confirm')
}
</script>

<style scoped>
.rules-content {
  max-height: 400px;
  overflow-y: auto;
  padding: 0 20px;
}

.loading {
  padding: 20px 0;
}

.rules-section {
  margin-bottom: 24px;
}

.rules-section h3 {
  margin-bottom: 12px;
  color: #303133;
}

.rules-section p {
  line-height: 1.6;
  color: #606266;
}

.settings-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #EBEEF5;
}

.settings-section h3 {
  margin-bottom: 16px;
  color: #303133;
}

.settings-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.settings-section li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #606266;
}

.agreement-section {
  margin-top: 24px;
  padding: 16px;
  background-color: #F5F7FA;
  border-radius: 4px;
}

.dialog-footer {
  text-align: center;
}
</style> 